<template>
  <view class="agreeMakeFriendLayout">
    <view class="avatar-box">
      <view class="img">
        <image :src="userData.img" mode="widthFix" />
      </view>
      <view class="name-id">
        <view class="name">{{ userData.nickname }}</view>
        <view class="id">
          <view class="tip">ID :</view>
          <view class="num">{{ userData.userId }}</view>
        </view>
      </view>
    </view>

    <view class="input-box">
      <view class="tip">对方验证信息</view>
      <textarea placeholder="请输入验证信息" class="textarea" v-model="textarea" :disabled="true" focus="false" />
      <view class="tip">备注</view>
      <input type="text" placeholder="请输入备注" class="input_text" v-model="input_text" />
    </view>

    <view class="btn-box">
      <view class="btn" @click="agreeMakeFriend">同意</view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { getUser, agreeReq } from '../../api/agreeMakeFriend';
import { useUserStore } from "../../store/modules/user"
import { FG } from '../../api/req.js';

let my = useUserStore()
let targetId = ""
let userData = reactive({})
let textarea = ref("")
let input_text = ref("")

onLoad(async param => {
  if (!param.id) return uni.navigateBack()
  if (!param.msg) return uni.navigateBack()
  if (!my.user._id) return uni.switchTab({ url: '/pages/chatList/chatList' })
  targetId = param.id
  let res = await getUser({ id: targetId })
  if (res.status == 200) {
    for (let key in res.data) {
      userData[key] = res.data[key]
    }
  }
  userData.img = `${FG.baseUrl}/static/${userData.img}`
  textarea.value = param.msg
})


function agreeMakeFriend() {
  let obj = {
    uid: my.user._id,
    fid: userData._id,
    name: input_text.value.trim()
  }
  agreeReq(obj).then(res => {
    if (res.status == 200) {
      uni.showToast({
        title: "发送成功",
        icon: "success",
        duration: 1000,
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 800)
    } else {
      uni.showToast({
        title: "发送失败",
        icon: "error",
        duration: 1000,
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 800)
    }
  })
}

</script>

<style lang="scss" scoped>
.agreeMakeFriendLayout {
  width: 100%;
  height: 100%;

  .avatar-box {
    width: 100%;
    height: 160rpx;
    display: flex;
    padding: 20rpx;

    .img {
      width: 120rpx;
      margin-right: 20rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
      }
    }

    .name-id {
      display: flex;
      flex-direction: column;
      max-width: 60%;
      flex: 1;
      justify-content: space-around;

      .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .id {
        display: flex;
        align-items: center;

        .tip {
          font-size: 24rpx;
          color: #999;
        }

        .num {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .input-box {
    width: 100%;
    padding: 20rpx;

    .tip {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 20rpx;
    }

    .textarea {
      box-sizing: border-box;
      width: 100%;
      height: 200rpx;
      background-color: #eee;
      padding: 10rpx 20rpx;
      margin-bottom: 20rpx;
      color: #999;
    }

    .input_text {
      box-sizing: border-box;
      width: 100%;
      height: 86rpx;
      background-color: #eee;
      padding: 10rpx 20rpx;
      margin-bottom: 20rpx;
    }
  }

  .btn-box {
    width: 100%;
    height: 140rpx;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 40rpx);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 70%;
      height: 60%;
      border-radius: 10rpx;
      background-color: #37b5e7;
      text-align: center;
      line-height: calc(140rpx * 0.6);
      color: #fffc;
    }
  }
}
</style>